<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.9.0.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#btn1").click(function(){
				$("div#first span").css("background","red");
				console.log($("div#first span").length);
			});

			$("#btn2").click(function(){
				$("div#first > span").css("background","red");
				console.log($("div#first > span").length);
			});
			
			$("#btn3").click(function(){
				$("div#first + div").css("background","red");
				console.log($("div#first + div").length);
			});

			$("#btn4").click(function(){
				$("div#first ~ div").css("background","red");
				console.log($("div#first ~ div").length);
			});
		});
	</script>	
</head>
<body>
	<input type="button" value="后代选择器" id="btn1">
	<input type="button" value="子选择器" id="btn2">
	<input type="button" value="相邻选择器" id="btn3">
	<input type="button" value="兄弟选择器" id="btn4">
	<hr>
	
	<div>最前面的div</div>
	<div id="first">itany1
		<p>
			<span>pan1</span>
			<span>pan2</span>
			<br>
			<span>ID为first的div中的p中的span</span>
		</p>
		<span>ID为fitst的div中的span</span>
	</div>
	<div class="hehe">itany2
		<p>
			<span>pan1</span>
			<span>pan2</span>
			<div>class为hehe的div中的p中的div</div>
		</p>
	</div>
	<div>itany3</div>
	<div class="hehe">itany4</div>
	<div>itany5</div>
	<div id="last">itany6</div>
	<p class="hehe">p1</p>
	<p>p2</p>
	<p>p3</p>
	<p>p4</p>
	<p>p5</p>
</body>
</html>